jQuery(function($){

    var chartLabels = [],
        chartDatas = [],
        allDatas = [],
        colors = ['rgba(151,187,205,1)','rgba(220,220,220,1)','rgba(255,38,38,1)','rgba(255,147,38,1)','rgba(191,191,255,1)','rgba(0,140,105,1)','rgba(38,92,255,1)','rgba(105,0,140,1)','rgba(54,0,217,1)'],
        fillColors = ['rgba(151,187,205,0.2)','rgba(220,220,220,0.2)','rgba(255,38,38,0.2)','rgba(255,147,38,0.2)','rgba(191,191,255,0.2)','rgba(0,140,105,0.2)','rgba(38,92,255,0.2)','rgba(105,0,140,0.2)','rgba(54,0,217,0.2)'];

    var initPage = _.once(function(){

        var chartTitle = '';
        var isUser = $('.tableWrapper').hasClass('countUser');
        var isSale = $('.tableWrapper').hasClass('countSale');

        _.each($('.dTable th i.fa-line-chart'), function( value, key, list ) {
            var $value = $(value);
            $value.parents('th').append('<b style="background-color:'+colors[key]+'"></b>');
        })

        // 日期控件
        $('.startDate').datepicker({
            keyboardNavigation: false,
            forceParse: false,
            autoclose: true,
            format: 'yyyy-mm-dd',
        }).on('changeDate', function(ev){
            $('.endDate').datepicker('setStartDate', ev.date);
        });
        $('.endDate').datepicker({
            keyboardNavigation: false,
            forceParse: false,
            autoclose: true,
            format: 'yyyy-mm-dd',
        }).on('changeDate', function(ev){
            $('.startDate').datepicker('setEndDate', ev.date);
        });

        _.each($('.dTable tbody tr'), function( value, key, list ){
            var $tds = $(value).find('td span');
            var tempArr = [];
            _.each($tds, function( td, tdKey ) {
                $td = $(td);
                if(tdKey == 0){
                    chartLabels.push($td.html());
                }else{
                    tempArr.push(parseInt($td.html()));
                }
                
            });
            allDatas.push(tempArr);
        });

        chartLabels = chartLabels.reverse();

        initChart();

        $('body').on('click', '.dTable th i', function(event) {
            event.preventDefault();
            var $this = $(this);
            var tid = $this.attr('tid');

            $this.toggleClass('active');

            var canvasHtml = '<canvas id="myChart" width="1000" height="400"></canvas>';
            $('.canvasBox').html(canvasHtml);

            initChart();

        });

        function initChart(){

            var ctx = $("#myChart").get(0).getContext("2d");

            var data = {
                labels: chartLabels,
                datasets: [],
            };
            var tempDatasetsData = [];
            _.each($('.dTable th i'), function( value, key, list ) {
                $value = $(value);
                var tempTid = null;
                if($value.hasClass('active')){
                    tempTid = $value.attr('tid');
                    var temp = {
                        label: $value.parents('th').find('span').html(),
                        fillColor: fillColors[tempTid-1],
                        strokeColor: colors[tempTid-1],
                        pointColor: colors[tempTid-1],
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: colors[tempTid-1],
                        data: [],
                    };
                    _.each(allDatas, function( trDatas, trKey ) {
                        _.each(trDatas, function( tdDatas, tdKey ) {
                            if(tempTid == tdKey+1){
                                temp.data.push(tdDatas);
                                tempDatasetsData.push(tdDatas);
                            }
                        });
                    });
                    data.datasets.push(temp);
                }
            });
            
            _.each(data.datasets, function( value, key, list ) {
                data.datasets[key].data = value.data.reverse();
            });
            //data.datasets = data.datasets.reverse()；
    
            var myLineChart = new Chart(ctx).Line(data, {
                scaleOverride: true,
                scaleStartValue:0,
                scaleSteps:10,
                scaleStepWidth:_(_.flatten(tempDatasetsData)).max()/10,
                responsive: true,
            });
        }
    });

    initPage();

    
    

}(jQuery));